<template>
  <div class="album-list">
    <div class="iii">
      <div id="img-container" ref="imgContainer"></div>
    </div>
    <div class="album-right">
      <Myself></Myself>
    </div>
  </div>

  <el-dialog v-model="dialogVisible" :width="isPC ? '50%' : '100%'">
    <img class="model-img" w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script setup lang="ts">
import { nextTick, onMounted, onUnmounted, ref } from 'vue';
import { _getPhotoListByAlbumId } from '@/pages/album/album.service.ts';
import { useRoute } from 'vue-router';
import { PhotoList } from '@/pages/album/album.types.ts';
import { RetVO } from '@/http/public.type.ts';
import Myself from '@/components/Myself.vue';
import { ResizeObserver } from 'resize-observer';

const dialogImageUrl = ref('');
const dialogVisible = ref(false);

const isPC = ref(false);
const minWidth = 1160;

// const timerId = null;

const PIC_WIDTH = 260;
const SPACING = 20;
let numberOfColumns = 0;
let arrangeArr: any;

const imgContainer = ref<Element>();
const observer = ref<ResizeObserver | null>(null); // 创建ResizeObserver实例

let container: Element;

const route = useRoute();

onMounted(() => {
  container = document!.getElementById('img-container') as HTMLElement;
  const id = route.params.id as string;
  init(id);

  observer.value = new ResizeObserver(resizeListen); // 创建ResizeObserver实例，并传入回调函数
  observer.value.observe(imgContainer!.value as HTMLElement); // 监听imgContainer元素的大小变化

  handleResize();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

function resizeListen(e: any) {
  const ele = e[0].target as HTMLElement;
  numberOfColumns = Math.floor(ele.clientWidth / (PIC_WIDTH + SPACING));
  arrangeArr = new Array(numberOfColumns);
  rearrangeImages(); // 调用重新排列图片的函数
}

function rearrangeImages() {
  const images = container.getElementsByTagName('img');
  for (let i = 0; i < images.length; i++) {
    setPositions({ target: images[i] });
  }
}

function createImages(srcArr: any[]) {
  nextTick(() => {
    srcArr.forEach((data) => {
      const img = document.createElement('img');
      img.onload = setPositions;
      img.width = PIC_WIDTH;
      img.src = data.imgThumbSrc;
      img.style.cursor = 'pointer';
      img.onclick = () => {
        dialogVisible.value = true;
        dialogImageUrl.value = data.imgSrc;
      };
      container.appendChild(img);
    });
  });
}

function setPositions(e: any) {
  const img = e.target as HTMLImageElement;
  img.style.position = 'absolute';

  let minHeightIndex = 0;

  if (!arrangeArr) {
    arrangeArr = new Array(numberOfColumns);
  }

  let minHeight = arrangeArr[0] || 0;

  for (let i = 1; i < arrangeArr.length; i++) {
    if (!arrangeArr[i] || arrangeArr[i] < minHeight) {
      minHeight = arrangeArr[i] || 0;
      minHeightIndex = i;
    }
  }

  img.style.top = `${minHeight}px`;
  img.style.left = `${minHeightIndex * (PIC_WIDTH + SPACING)}px`;
  arrangeArr[minHeightIndex] = minHeight + img.height + SPACING;

  document.getElementById('img-container')!.style.height = `${arrangeArr[0]}px`;
}

function init(id: string) {
  _getPhotoListByAlbumId(id).then((res: RetVO<PhotoList[]>) => {
    const urlArr = res.data.map((item: PhotoList) => {
      return {
        imgThumbSrc: item.imgThumbSrc,
        imgSrc: item.imgSrc
      };
    });
    createImages(urlArr);
  });
}

function handleResize() {
  isPC.value = window.innerWidth > minWidth;
}
</script>

<style scoped lang="less">
.album-list {
  width: 78vw;
  z-index: 50;
  margin: 0 auto 120px auto;
  position: relative;
  display: flex;

  .iii {
    flex: 1;
    box-sizing: border-box;

    background-color: var(--background-secondary);
    color: var(--font-color);
    box-shadow: var(--crane-ring-offset-shadow, 0 0 #0000),
      var(--crane-ring-shadow, 0 0 #0000), var(--crane-shadow);
    border-radius: 15px;
    padding: 15px;

    #img-container {
      position: relative;
      width: 100%;
    }
  }

  .album-right {
    width: 320px;
    margin-left: 20px;
    position: relative;
  }
}

.model-img {
  width: 100%;
  height: 100%;
}
</style>
